<template>
    <div class="my-progress-view">

        <div class="progress-base">

          <div class="progress-content" :class="isStart?'hasProgress':''">

            <div class="progress-point" v-if="isStart">

              <span class="progress-text">{{progressStr}}</span>

            </div>

          </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "progressView",
        props:{
            progress:{
                type:Number,
                defaule:0,
            }
        },
        watch:{
            progress:{
                handler(newV,oldV){
                    if (newV){
                        this.progressStr = newV + "%"

                        if (document.getElementsByClassName('progress-content')){
                            let dom = document.getElementsByClassName('progress-content')

                            let x = newV
                            if (newV > 100){
                                x = 100
                            }
                            setTimeout(()=>{
                                console.log(dom,dom[0])
                                this.isStart = true
                                if (x == 0){
                                    this.isStart = false
                                } else if (x < 7){
                                    x = 7
                                }
                                dom[0].style.width = x + "%"
                            },500)



                        }

                    }else {
                        this.isStart = false
                    }
                },
                immediate:true,
                deep:true,
            }
        },
        data(){
            return{
                progressStr:'',
                isStart:true,
            }
        }

    }
</script>

<style lang="scss" scoped>

  .my-progress-view{
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    height: 100px;
    display: flex;
    align-items: flex-end;
    .progress-base{
      background-color: #c7e7fd;
      width: 100%;
      height: 25px;
      border-radius: 100px;

      .hasProgress{
        min-width: 60px;
      }
      .progress-content{
        border-radius: 100px;
        width: 0%;

        height: 25px;
        background-color: rgb(78, 201, 156);
        position: relative;
        .progress-point{
          background-color: white;
          position: absolute;
          right: -10px;
          top:-5px;
          height: 15px;
          width: 15px;
          border: 10px rgb(78, 201, 156) solid;
          border-radius: 100px;
          display: flex;
          align-items: center;
          justify-content: center;

          .progress-text{
            position: absolute;
            left: -45px;
            color: white;
            font-size: 14px;
            font-weight: bold;
          }
        }

      }
    }
  }

</style>
